<template>
	<view class="wrap">
		<u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType">
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>约拍要求<text class="font-size-base text-color-assist ml-10">(尽可能详细)</text></view>
				<u-form-item prop="demand">
					<u-input height='300' type="textarea" placeholder="请描述一下你的约拍要求...如你的特长、才艺、接单范围、期待合作的通告(不能包含任何联系方式,照片中不能有漏点照片,不能发布私房约拍.不要用拼图,否则审核不通过,10字以上)" v-model="model.demand" />
				</u-form-item>
			</view>
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30">上传照片或者视频<text class="font-size-base text-color-assist ml-10">(买家秀/种草/探店请上传自己的作品，视频和图片需分开上传)</text></view>
				<view class="d-flex justify-content-start">
					<u-upload v-if="isShowImageUpload" width="160" height="160" uploadText="上传图片" iconImg='/static/image.png' :mediaType='imageMediaType' :maxCount="9" :multiple='true' :previewFullImage="true" :auto-upload='false' @on-list-change="mediaChange"></u-upload>
					<u-upload v-if="isShowVideoUpload" width="160" height="160" uploadText="上传视频" iconImg='/static/video.png' :mediaType='videoMediaType' :maxCount="1" :multiple='false' :previewFullImage="true" :auto-upload='false' @on-list-change="mediaChange"></u-upload>
				</view>
			</view>
			<view class="section">
				<u-form-item label="约拍谁" prop="shootWho" label-width="160" :required="true">
					<u-input type="select" :select-open="selectShootWhoShow" v-model="model.shootWho" placeholder="请选择约拍谁" @click="selectShootWhoShow = true"></u-input>
				</u-form-item>
				<u-form-item label="费用模式" prop="feeMode" label-width="160" :required="true">
					<u-input type="select" :select-open="selectFeeModeShow" v-model="model.feeMode" placeholder="请选择费用模式" @click="selectFeeModeShow = true"></u-input>
				</u-form-item>
				<u-form-item v-if="model.feeModeValue==2||model.feeModeValue==3" :label="feeLabel" label-width="160" :required="true">
					<u-input placeholder="请输入付费金额(元)" v-model='model.fee' type="number"></u-input>
				</u-form-item>
				<u-form-item label="面向地区" prop="region" label-width="160" :required="true" @tap="citySelectChange=true">
					<u-input type="select" :select-open="citySelectChange" v-model="model.region" placeholder="请选择地区" @click="citySelectChange = true"></u-input>
				</u-form-item>
				<u-form-item label="信用担保" prop="isGuaranty" label-width="160" :required="true">
					<u-input type="select" :select-open="selectCreditGuarantyShow" v-model="model.isGuaranty" placeholder="请选择信用担保" @click="selectCreditGuarantyShow = true"></u-input>
				</u-form-item>
				<u-form-item label="实名认证" prop="isCert" label-width="160" :required="true">
					<u-input type="select" :select-open="selectCertShow" v-model="model.isCert" placeholder="请选择实名认证" @click="selectCertShow = true"></u-input>
				</u-form-item>
			</view>
			
			<view class="section">
				<u-form-item label="拍摄时间" prop="region" label-width="160" >
					<u-input type="input" placeholder="选填" v-model="model.day" />
				</u-form-item>
				<u-form-item label="拍摄场地" prop="region" label-width="160" right-icon="map">
					<view @tap="chooseLocation"><text :style="model.spaceName?'color:#606266;':'color:#C0C4CC;'">{{model.spaceName?model.spaceName:'点击选择位置坐标(选填)'}}</text> <u-icon v-if="model.spaceName" @tap.stop="spaceAddressClear" class="ml-20" style="color:#C0C4CC;" size="30" name="close-circle-fill"></u-icon> </view>
				</u-form-item>
			</view>
			
			<view class="section">
				<view class="font-size-lg font-weight-bold pt-30"><text class="input-required">*</text>约拍标签</view>
				<view class='quan_release_foot'>
					<view class="quan_release_foot_photo" :class="model.styleTag.indexOf(item)==-1?'':'selected_tag'" v-for="(item,index) in initialize.shootStyleTag" :key="index" @tap="selectedStyleTag(item)">{{item}}</view>
				</view>
			</view>
		</u-form>
		<!-- 发布约拍 end -->
		<view class="footer">
			<view class="bottom">
				<view class="font-size-lg font-weight-bold ml-30">
					<view class="text-color-primary font-weight-bold"><text class="font-size-extra-lg">5</text><text class="font-size-base">人人豆</text></view>
					<text class="text-color-assist font-size-sm">剩余：{{userInfo.beans}}人人豆</text>
				</view>
				<view class="button">
					<button type="primary" @tap='submit()'>发布</button>
				</view>
			</view>
		</view>
		<!-- 城市选择 -->
		<city-select v-model="citySelectChange" @city-change="cityChange"></city-select>
		<u-select mode="single-column" :list="initialize.purposeTags" v-model="selectShootWhoShow" @confirm="selectShootWhoConfirm"></u-select>
		<u-select mode="single-column" :list="initialize.feeTags" v-model="selectFeeModeShow" @confirm="selectFeeModeConfirm"></u-select>
		<u-select mode="single-column" :list="creditGuarantyList" v-model="selectCreditGuarantyShow" @confirm="selectCreditGuarantyConfirm"></u-select>
		<u-select mode="single-column" :list="certList" v-model="selectCertShow" @confirm="selectCertConfirm"></u-select>
	</view>
</template>

<script>
import {mapState, mapMutations } from 'vuex'
import citySelect from '@/components/city-select/city-select.vue';
export default {
	components: {
		citySelect
	},
	computed:{
		...mapState([]),
	},
	computed:{
		...mapState(['initialize', 'userInfo']),
	},
	data() {
		return {
			citySelectChange:false,
			errorType: ['toast'],
			feeLabel:'',
			selectedStyleTagIndex:[],
			selectFeeModeShow:false,
			selectShootWhoShow:false,
			feeMode:[{label:'希望互勉',value:'1'},{label:'需要收费',value:'2'},{label:'愿意付费',value:'3'},{label:'费用协商',value:'4'}],
			selectCreditGuarantyShow:false,
			creditGuarantyList:[{label:'不要求对方存入保证金',value:'0'},{label:'要求对方存入保证金',value:'1'}],
			selectCertShow:false,
			certList:[{label:'不要求对方实名认证',value:0},{label:'要求对方实名认证',value:'1'}],
			media:[],
			imageMediaType:['image'],
			videoMediaType:['video'],
			isShowImageUpload:true,
			isShowVideoUpload:true,
			model: {
				demand:'',
				media:[],
				shootWho:'',
				shootWhoValue:'',
				feeMode:'',
				feeModeValue:'',
				fee:'',
				province:'',
				provinceValue:'',
				city:'',
				cityValue:'',
				region:'',
				isGuaranty:'',
				isGuarantyValue:'',
				isCert:'',
				isCertValue:'',
				day:'',
				spaceName:'',
				spaceAddress:'',
				spaceLongitude:'',
				spaceLatitude:'',
				filmstrip:'',
				styleTag:[],
				show:false
			},
			rules: {
				demand: [
					{
						required: true,
						message: '请输入约拍要求',
						trigger: 'blur' ,
					},
					{
						min: 3,
						max: 100,
						message: '约拍要求在3到100个字符',
						trigger: ['change','blur'],
					}
				],
				shootWho: [
					{
						required: true,
						message: '请选择约拍谁',
						trigger: 'change'
					},
				],
				feeMode: [
					{
						required: true,
						message: '请选择费用模式',
						trigger: 'change'
					},
				],
				region: [
					{
						required: true,
						message: '请选择面向地区',
						trigger: 'change'
					},
				],
				isGuaranty: [
					{
						required: true,
						message: '请选择信用担保',
						trigger: 'change'
					},
				],
				isCert: [
					{
						required: true,
						message: '请选择是否实名',
						trigger: 'change'
					},
				]
			}
		};
	},
	onLoad(options) {
		this.model.spaceId = options.spaceId;
		this.model.spaceName = options.spaceName;
		this.model.spaceAddress = options.spaceAddress;
		this.model.spaceLongitude = options.spaceLongitude
		this.model.spaceLatitude = options.spaceLatitude
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		...mapMutations(['setUserInfo']),
		btnClick() {
			this.show = true;
		},
		mediaChange(lists, name) {
			if(lists.length==0) {
				this.isShowVideoUpload = true;
				this.isShowImageUpload = true;
			}else if(lists[0].type=='image') {
				this.isShowVideoUpload = false;
			}else if(lists[0].type=='video') {
				this.isShowImageUpload = false;
			}
			this.media = lists;
		},
		selectShootWhoConfirm(e) {
			this.model.shootWho = '';
			e.map((val, index) => {
				this.model.shootWho = val.label;
				this.model.shootWhoValue = val.value;
			})
		},
		selectFeeModeConfirm(e) {
			this.model.feeMode = '';
			this.model.feeModeValue = ''
			e.map((val, index) => {
				this.model.feeMode = val.label;
				this.model.feeModeValue = val.value;
			})
			
			if(this.model.feeModeValue==2) {
				this.feeLabel = '收费金额'
			}else if(this.model.feeModeValue==3) {
				this.feeLabel = '付费金额'
			}
		},
		selectCreditGuarantyConfirm(e) {
			this.model.isGuaranty = '';
			this.model.isGuarantyValue = ''
			e.map((val, index) => {
				this.model.isGuaranty = val.label;
				this.model.isGuarantyValue = val.value;
			})
		},
		selectCertConfirm(e) {
			this.model.isCert = '';
			this.model.isCertValue = ''
			e.map((val, index) => {
				this.model.isCert = val.label;
				this.model.isCertValue = val.value;
			})
		},
		selectedStyleTag(item) {
			let index = this.model.styleTag.indexOf(item);
			if(index==-1) {
				if(this.model.styleTag.length==5) {
					this.$u.toast("最多选择5个标签")
				}else{
					this.model.styleTag.push(item)
				}
			}else{
				this.model.styleTag.splice(index ,1);
			}
		},
		cityChange(e) {	
			this.model.region   = e.city;
			this.model.province = e.province;
			this.model.provinceValue = e.provinceValue;
			this.model.city     = e.city;
			this.model.cityValue = e.cityValue;
		},
		chooseLocation() {
			let that = this;
			uni.chooseLocation({
				latitude:Number(this.model.spaceLatitude),
				longitude:Number(this.model.spaceLongitude),
				success:(res)=>{
					that.model.spaceName = res.name;
					that.model.spaceAddress = res.address;
					that.model.spaceLongitude = res.longitude;
					that.model.spaceLatitude = res.latitude;
				}
			})
		},
		spaceAddressClear() {
			this.model.spaceName = "";
			this.model.spaceAddress = "";
			this.model.spaceLongitude = "";
			this.model.spaceLatitude = "";
		},
		async submit() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					let that = this;
					uni.showModal({
						title: '提示',
						content: '发布约拍将消耗5个人人豆!',
						confirmText:'发布',
						success (res) {
							if (res.confirm) {
								that.request();
							} 
						}
					})
				} 
			});
		},
		
		async request(e) {	
			if(this.model.feeModeValue==2||this.model.feeModeValue==3) {
				if(!this.model.fee) {
					this.$u.toast("请输入收费或付费金额");return;
				}
			}
			if(this.model.styleTag.length==0) {
				this.$u.toast("请选择约拍标签");return
			}
	
			
			uni.showLoading({mask: true,title: '提交中...'});
			let userInfo = this.userInfo;
			userInfo.beans = userInfo.beans-5;
			uni.setStorageSync("userInfo", userInfo);
			this.setUserInfo(userInfo);
			
			uni.redirectTo({url:"/pages/jump/jump?txt=提交成功"})
			uni.hideLoading();
		}
	}
};
</script>
<style>
page {
	background-color: #F5F5F5;
}
.wrap {
	padding-bottom: 200rpx;
}
.section {
	background-color: #FFFFFF;
	padding: 0 30rpx;
	margin-top: 20rpx;
}
.quan_release_foot {
	display: flex;
	padding: 40rpx 0;
    position: relative;
    font-size: 0;
    font-family: Helvetica;
	flex-flow: wrap; 
}
.quan_release_foot_emoji, 
.quan_release_foot_goods, 
.quan_release_foot_photo, 
.quan_release_foot_video {
    position: relative;
    display: inline-block;
	padding: 10rpx 36rpx;
    color: #666;
    font-size: 28rpx;
    text-align: center;
    border-radius: 60rpx;
    background-color: #f5f5f5;
	margin-bottom: 20rpx;
	margin-right: 10rpx;
}
.input-required {
	vertical-align: middle;
	color: #fa3534;
}
.selected_tag {
	background-color: rgb(239, 210, 52);
}
</style>
<style scoped lang="scss">
.footer {
	position: fixed;
	bottom: 0;
	width: 100%;
	display: flex;
	flex-direction: column;
	background-color: #FFFFFF;
	z-index: 10;
	
	.bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		
		.button {
			margin-right: 20rpx;
			padding: 20rpx 0;
		
			button {
				height: 100%;
				font-size: $font-size-lg;
				border-radius: 50rpx !important;
				padding: 0 120rpx;
			}
		}
		
	}
}
</style>
